<template>
  <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
           @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
           label-position="top"
  >
    <el-form-item label="链接编号:" prop="name" :error="formError">
      <el-input v-model.trim="form.name" placeholder="只能填写字母及数字" auto-complete="off">
        <template slot="prepend">
          <svg-icon icon-class="link"></svg-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item vertical-fill no-spacing>
      <el-button
        type="primary"
        native-type="submit"
      >确定
      </el-button>
      <el-button
        @click="$emit('on-close')">
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {form, factory} from '@/build';
  import {
    addDomainApi as saveApi
  } from "@/services/api/promotion";

  export default {
    props: ['editData'],

    mixins: [form],

    inject: ['setDialogHeader'],

    data() {
      return {
        form: {
          domainId: this.editData.domain_id,
          name: this.editData.name
        },
        loading: false,
        formError: '',
        rules: {
          name: factory.getRule('linkName')
        }
      };
    },

    created() {
      this.setDialogHeader(_.isEmpty(this.editData) ? '添加推广链接' : '修改链接编号');
    },

    mounted() {
      this.bindSave(saveApi, 'saveForm', 'form', {
        beforeSend: (data) => {

          this.formError = '';
          return data;
        },
        successMessage: this.editData ? '修改链接成功' : '添加推广链接成功',
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$emit('on-success');
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
        }
      });
    }
  };
</script>
